<div class="element-list page-layout card">
    <div class="content center mt-32" 
        fxLayout="row wrap" fxLayout.gt-sm="row nowrap" fxLayoutAlign="space-between start" fxLayoutGap.gt-sm="30px">
        <div class="bg-white p-24 mb-down-sm-30" fxFlex="1 0 auto" fxFlex.lt-md="100">
            <h3>Simple lists</h3>
            <mat-list>
                <mat-list-item>
                    <div matLine>Pepper</div>
                    <img class="item-preview" src="https://pinimg.ibenchu.net/564x/d2/9e/af/d29eaf15aad624817f1bf80ed20f191d.jpg">
                    <img class="item-preview" src="https://pinimg.ibenchu.net/564x/fc/e7/00/fce700d05d964c79acd85dbfc3601dab.jpg">
                    <img class="item-preview" src="https://pinimg.ibenchu.net/564x/0e/06/cb/0e06cb028b8bad85854d75711059bb53.jpg">
                    <img class="item-preview" src="https://pinimg.ibenchu.net/originals/16/98/c5/1698c56c828118a6e26f511617a29257.jpg">
                    <mat-divider></mat-divider>
                </mat-list-item>
                <mat-list-item>
                    <div matLine>Salt</div>
                    <img class="item-preview" src="https://pinimg.ibenchu.net/564x/d2/9e/af/d29eaf15aad624817f1bf80ed20f191d.jpg">
                    <img class="item-preview" src="https://pinimg.ibenchu.net/564x/fc/e7/00/fce700d05d964c79acd85dbfc3601dab.jpg">
                    <img class="item-preview" src="https://pinimg.ibenchu.net/564x/0e/06/cb/0e06cb028b8bad85854d75711059bb53.jpg">
                    <img class="item-preview" src="https://pinimg.ibenchu.net/originals/16/98/c5/1698c56c828118a6e26f511617a29257.jpg">
                    <mat-divider></mat-divider>
                </mat-list-item>
                <mat-list-item>
                    <div matLine>Paprika</div>
                    <img class="item-preview" src="https://pinimg.ibenchu.net/564x/d2/9e/af/d29eaf15aad624817f1bf80ed20f191d.jpg">
                    <img class="item-preview" src="https://pinimg.ibenchu.net/564x/fc/e7/00/fce700d05d964c79acd85dbfc3601dab.jpg">
                    <img class="item-preview" src="https://pinimg.ibenchu.net/564x/0e/06/cb/0e06cb028b8bad85854d75711059bb53.jpg">
                    <img class="item-preview" src="https://pinimg.ibenchu.net/originals/16/98/c5/1698c56c828118a6e26f511617a29257.jpg">
                    <mat-divider></mat-divider>
                </mat-list-item>
                <mat-list-item>
                    <div matLine>Call</div>
                    <img class="item-preview" src="https://pinimg.ibenchu.net/564x/d2/9e/af/d29eaf15aad624817f1bf80ed20f191d.jpg">
                    <img class="item-preview" src="https://pinimg.ibenchu.net/564x/fc/e7/00/fce700d05d964c79acd85dbfc3601dab.jpg">
                    <img class="item-preview" src="https://pinimg.ibenchu.net/564x/0e/06/cb/0e06cb028b8bad85854d75711059bb53.jpg">
                    <img class="item-preview" src="https://pinimg.ibenchu.net/originals/16/98/c5/1698c56c828118a6e26f511617a29257.jpg">
                    <mat-divider></mat-divider>
                </mat-list-item>
                <mat-list-item>
                    <div matLine>Inbox</div>
                    <img class="item-preview" src="https://pinimg.ibenchu.net/564x/d2/9e/af/d29eaf15aad624817f1bf80ed20f191d.jpg">
                    <img class="item-preview" src="https://pinimg.ibenchu.net/564x/fc/e7/00/fce700d05d964c79acd85dbfc3601dab.jpg">
                    <img class="item-preview" src="https://pinimg.ibenchu.net/564x/0e/06/cb/0e06cb028b8bad85854d75711059bb53.jpg">
                    <img class="item-preview" src="https://pinimg.ibenchu.net/originals/16/98/c5/1698c56c828118a6e26f511617a29257.jpg">
                    <mat-divider></mat-divider>
                </mat-list-item>
            </mat-list>
        </div>
        <div class="bg-white p-24 mb-32" fxFlex="1 0 auto" fxFlex.lt-md="48">
            <h3>Navigation lists</h3>
            <mat-nav-list>
                <mat-list-item>
                    <a matLine href=".">Home</a>
                    <button mat-icon-button>
                        <mat-icon>info</mat-icon>
                    </button>
                </mat-list-item>
                <mat-list-item>
                    <a matLine href=".">Base Ui</a>
                    <button mat-icon-button>
                        <mat-icon>info</mat-icon>
                    </button>
                </mat-list-item>
                <mat-list-item>
                    <a matLine href=".">Profile</a>
                    <button mat-icon-button>
                        <mat-icon>info</mat-icon>
                    </button>
                </mat-list-item>
                <mat-list-item>
                    <a matLine href=".">About</a>
                    <button mat-icon-button>
                        <mat-icon>info</mat-icon>
                    </button>
                </mat-list-item>
                <mat-list-item>
                    <a matLine href=".">Guide</a>
                    <button mat-icon-button>
                        <mat-icon>info</mat-icon>
                    </button>
                </mat-list-item>
            </mat-nav-list>
        </div>
        <div class="bg-white p-24" fxFlex="1 0 auto" fxFlex.lt-md="48">
            <h3>Selection lists</h3>
            <mat-selection-list>
                <mat-list-option>Boots</mat-list-option>
                <mat-list-option>Clogs</mat-list-option>
                <mat-list-option>Loafers</mat-list-option>
                <mat-list-option>Moccasins</mat-list-option>
                <mat-list-option>Sneakers</mat-list-option>
            </mat-selection-list>
        </div>
    </div>

    <div class="content center" fxLayout="row wrap" fxLayout.gt-sm="row nowrap" fxLayoutAlign="space-between start" fxLayoutGap.gt-sm="30px">
        <div class="bg-white p-24 mb-down-sm-30" fxFlex="1 1 auto" fxFlex.xs="100" fxFlex.sm="48">
            <h3>Multi-line & Icons lists</h3>
            <mat-list>
                <mat-list-item>
                    <mat-icon matListIcon>folder</mat-icon>
                    <h3 matLine>From</h3>
                    <p matLine>Subject</p>
                    <p matLine class="demo-2">Content</p>
                </mat-list-item>
                <mat-list-item>
                    <mat-icon matListIcon>folder</mat-icon>
                    <h3 matLine>From</h3>
                    <p matLine>
                        <span>Subject</span>
                        <span class="demo-2"> -- Content</span>
                    </p>
                </mat-list-item>
            </mat-list>
        </div>
        <div class="bg-white p-24 mb-down-sm-30" fxFlex="1 1 auto" fxFlex.xs="100" fxFlex.sm="48">
            <h3>Lists with avatars</h3>
            <mat-list>
                <mat-list-item>
                    <img matListAvatar src="https://pinimg.ibenchu.net/564x/4e/f8/e4/4ef8e4003d01d2bcb4e6bc8db7a0b2ef.jpg">
                    <div matLine>
                        <div>Herman Beck</div>
                        <span class="secondary-text font-size-14">CEO</span>
                    </div>
                </mat-list-item>
                <mat-list-item>
                    <img matListAvatar src="https://pinimg.ibenchu.net/564x/2a/0e/97/2a0e9792a8f1f9d7b3f7568882790c3a.jpg">
                    <div matLine>
                        <div>Mary Adams</div>
                        <span class="secondary-text font-size-14">CIO</span>
                    </div>
                </mat-list-item>
                <mat-list-item>
                    <img matListAvatar src="https://pinimg.ibenchu.net/564x/95/d3/ab/95d3ab06ef343085fb63a9812cf80772.jpg">
                    <div matLine>
                        <div>Caleb Richards</div>
                        <span class="secondary-text font-size-14">CTO</span>
                    </div>
                </mat-list-item>
                <mat-list-item>
                    <img matListAvatar src="https://pinimg.ibenchu.net/564x/38/59/f6/3859f6d3531a561eeadf0fa2a9f5ec5d.jpg">
                    <div matLine>
                        <div>June Lane</div>
                        <span class="secondary-text font-size-14">CVO</span>
                    </div>
                </mat-list-item>
                <mat-list-item>
                    <img matListAvatar src="https://pinimg.ibenchu.net/564x/5c/2d/78/5c2d78cf768f6f68f60f91efd46e6f22.jpg">
                    <div matLine>
                        <div>Herman Lucy</div>
                        <span class="secondary-text font-size-14">COO</span>
                    </div>
                </mat-list-item>
            </mat-list>
        </div>
        <div class="bg-white p-24" fxFlex="1 1 auto" fxFlex.lt-md="100">
            <h3>Lists with multiple sections</h3>
            <mat-list>
                <h3 matSubheader>Folders</h3>
                <mat-list-item>
                    <mat-icon matListIcon>folder</mat-icon>
                    <h4 matLine>File</h4>
                    <p matLine class="secondary-text">2018-02-20</p>
                </mat-list-item>
                <mat-list-item>
                    <mat-icon matListIcon>folder</mat-icon>
                    <h4 matLine>Image</h4>
                    <p matLine class="secondary-text">2018-12-21</p>
                </mat-list-item>
                <mat-list-item>
                    <mat-icon matListIcon>folder</mat-icon>
                    <h4 matLine>Video</h4>
                    <p matLine class="secondary-text">2018-07-27</p>
                </mat-list-item>
                <mat-divider></mat-divider>
                <h3 matSubheader>Notes</h3>
                <mat-list-item>
                    <mat-icon matListIcon>note</mat-icon>
                    <h4 matLine>Cras justo odio</h4>
                    <p matLine class="secondary-text">2018-10-10</p>
                </mat-list-item>
                <mat-list-item>
                    <mat-icon matListIcon>note</mat-icon>
                    <h4 matLine>Vestibulum at eros</h4>
                    <p matLine class="secondary-text">2018-10-10</p>
                </mat-list-item>
                <mat-list-item>
                    <mat-icon matListIcon>note</mat-icon>
                    <h4 matLine>Dapibus ac facilisis in</h4>
                    <p matLine class="secondary-text">2018-10-10</p>
                </mat-list-item>
            </mat-list>
        </div>
    </div>
</div>
